/**
 * 创建公共头部区域
 * @param {[type]} options [description]
 */
function Header(options={}){
    this.options = options;
    this.init();
}

Header.prototype.init = function(){
    this.initHeader();
}

Header.prototype.getTime = function(){
    var myDate = new Date();
    var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var myToday = myDate.getDate(); //获取当前日(1-31)
    var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    var myHour = myDate.getHours(); //获取当前小时数(0-23)
    var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
    var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
    var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var time,date;

    date = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + ' '+" " + week[myDay];
    time = fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond);

    return { date, time } 

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }
}

Header.prototype.initHeader = function(){
    let result = this.getTime();
    let header = document.createElement("div");
        header.className = "header flex";

    let title = document.createElement("span");
        title.className = "title"; 
        title.innerHTML = this.options.title || "环保监控一体化平台";

    let dateContainer = document.createElement("span");
        dateContainer.className = "date-container flex";     

    let time = document.createElement("span");
        time.className = "time";
        time.innerHTML = result.time;

    let date = document.createElement("span");
        date.className = "date mgl-14";
        date.innerHTML = result.date;

        dateContainer.appendChild(time)
        dateContainer.appendChild(date)
        header.appendChild(title)
        header.appendChild(dateContainer)

        // <svg version="1.1" class="svg" xmlns="">
        //     <path d="M0 39 710 43 738 71 1182 70 1212 43 1920 43" stroke="orange" fill="transparent" stroke-width="2"></path>   
        // </svg>
        let light = document.createElement("div");
        light.className= "light";
        header.appendChild(light);

        $(this.options.el || ".main-page").prepend(header);
        setInterval(()=>{
            let res = this.getTime();
            time.innerHTML = res.time;
            date.innerHTML = res.date;
        }, 1000);
        
}


/**
 * 创建页面底部菜单
 */
function Footer(options={}){
    this.options = options;
    this.init();
}

Footer.prototype.init = function(){
    this.initFooter();
}

Footer.prototype.showMessage = function(){
    var msg = document.querySelector("div.message-tip");
    if(msg){
        msg.innerHTML = "href为空";
    }else{
        msg = document.createElement("div");
        msg.className = "message-tip";
        msg.innerHTML = "href为空";
        msg.style = "position:fixed;width: 220px;top: 84px;left: calc(50% - 110px);z-index: 99999;background:rgba(138,105,30,0.8);line-height: 40px;text-indent: 20px;font-family: fangsong;font-size: 18px;border-radius: 4px;";
        document.body.appendChild(msg);
    }

    setTimeout(function(){ msg.remove(); },2000);
}

Footer.prototype.initFooter = function(){

    let footer = document.createElement("div");
        footer.className = "footer";

    let footerBox = document.createElement("div");
        footerBox.className = "footer-box flex";
        
    let wrapper = document.createElement("div");
        wrapper.className = "wrapper";


    let prev = document.createElement("span");
        prev.className = "prev";

    let ul = document.createElement("ul");
        ul.className = "footer-ul";

    let next = document.createElement("span");
        next.className = "next";

    if(!Array.isArray(this.options.menus)){
        throw new Error("无效的菜单数据");
    }
    this.options.menus.forEach((item)=>{
        let li = document.createElement("li");
            li.className = "item";
        let span = document.createElement("span");
            span.innerHTML = item.text;
            if(item.text == this.options.curMenu){
                span.className = "active";
            }
            li.appendChild(span);
            ul.appendChild(li);

            span.onclick = (e)=>{
                if(!item.href){
                    this.showMessage();
                }else{
                    location.href = item.href;
                }
            }
    });
    wrapper.appendChild(prev);
    wrapper.appendChild(ul);
    wrapper.appendChild(next);


    let leftLight = document.createElement("div");
        leftLight.className= "light-left";
    let rightLight = document.createElement("div");
        rightLight.className= "light-right";

    footerBox.appendChild(wrapper);
    footerBox.appendChild(leftLight);
    footerBox.appendChild(rightLight);
    footer.appendChild(footerBox);

    $(this.options.el || ".main-page").append(footer);

    if(this.options.menus.length>this.options.size){
        $(".footer").slide({mainCell:"ul",effect:"leftLoop",vis:this.options.size});
    }else{
        prev.remove();
        next.remove();
    }
}

/**
 * 创建左侧公共菜单
 */
function LeftSiderMenu(options={}){
    this.options = options;
    this.init();
}

LeftSiderMenu.prototype.init = function(){
    this.initSiderMenu();
}

LeftSiderMenu.prototype.initSiderMenu = function(){
    let self = this;
    let menuContainer = document.createElement("div");
        menuContainer.className = "menu-container";

    let unfold = document.createElement("div");
        unfold.className = "icon-unfold";

    let wrapper = document.createElement("div");
        wrapper.className = "wrapper";

    let toUp = document.createElement("div");
        toUp.className = "to-up flex";

    let upIcon = document.createElement("span");
        upIcon.className = "icon-menu-up";

        toUp.appendChild(upIcon)

    let menuBox = document.createElement("span");
        menuBox.className = "menu-box";

    let ul = document.createElement("ul");
        ul.className = "ul";

    let toDown = document.createElement("div");
        toDown.className = "to-down flex";

    let downIcon = document.createElement("div");
        downIcon.className = "icon-menu-down";

        toDown.appendChild(downIcon)

    let putAway = document.createElement("span");
        putAway.className = "put-away";

        // 收起
        putAway.onclick = ()=>{
            menuContainer.classList.add("close-menu");
            unfold.classList.add("show-unfold");
        }

        // 展开
        unfold.onclick = ()=>{
            menuContainer.classList.remove("close-menu");
            unfold.classList.remove("show-unfold");
        }

    if(!Array.isArray(this.options.menus)){
        throw new Error("无效的菜单数据");
    }


    this.options.menus.forEach((item)=>{
        let li = document.createElement("li");
        
        // 如果有子菜单,目前只支持到两级菜单
        if(item.children && item.children.length>0){
            let children = document.createElement("div");
                children.className = "children";
                children.innerHTML = item.text;

            let childrenUl = document.createElement("ul"); 
                childrenUl.className = "sub-ul";

            item.children.forEach(function(row){
                let subLi = document.createElement("li");
                    subLi.innerHTML = row.text;
                    childrenUl.appendChild(subLi);

                if(row.text == self.options.curMenu){
                    li.className = "active open";
                    subLi.className = "active";
                }

                subLi.onclick = function(e){
                    event.preventDefault();
                    e.stopPropagation();
                    location.href = row.href;
                }
            })

            li.appendChild(children);
            li.appendChild(childrenUl);

            if(item.text == this.options.curMenu){
                li.className = "active open";
            }

            li.onclick = function(e){
                event.preventDefault();
                e.stopPropagation();
                $(li).toggleClass("open");
            }

        }else{
            let text = document.createElement("span");
            text.innerHTML = item.text;
            li.appendChild(text);

            if(item.text == this.options.curMenu){
                li.className = "active";
            }

            text.onclick = (e)=>{
                location.href = item.href;
            }
        }

        ul.appendChild(li);
    })


    menuBox.appendChild(ul)

    wrapper.appendChild(toUp)
    wrapper.appendChild(menuBox)
    wrapper.appendChild(toDown)
    wrapper.appendChild(putAway)
    menuContainer.appendChild(wrapper);
    menuContainer.appendChild(unfold);
    $(this.options.el || ".sub-page-container").prepend(menuContainer);


    if(this.options.menus.length>this.options.size){
        $(".menu-container").slide({mainCell:"ul",effect:"topLoop",vis:this.options.size,prevCell:".icon-menu-up",nextCell:".icon-menu-down"});
    }else{
        toUp.remove();
        toDown.remove();
    }

}

new Header();
window.onload = function(){
    // 实例化头部
    resize();
}

$(window, document).resize(function (){
    resize();
});

function resize(){
    let pageBox = $("body").children()[0];
    var ratio = $(window).width() / window.screen.width;
    $(pageBox).css({
        transform:"scale("+ratio+")",
        transformOrigin: "left top",
        backgroundSize: "100%"
    });
}
